<#assign static="${request.contextPath}/resources">
<#assign ctx="${request.contextPath}">

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>课题组</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${static}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${static}/style/admin.css" media="all">
</head>
<body>


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">



        <div class="layui-col-xs3">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">项目已上线</div>
                        <div class="layui-card-body">
                            ${goneTime}, 共${day}天
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">接入医院</div>
                        <div class="layui-card-body">
                            ${hospitalCount}家
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">接入设备</div>
                        <div class="layui-card-body">
                            ${itemCount}台
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">产生工单</div>
                        <div class="layui-card-body">
                            ${validOrderCount}/${allOrderCount}
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="layui-col-xs6">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">设备数统计</div>
                        <div class="layui-card-body">

                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                                <div id="card1" style="height:100%; width: 100%" ></div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">医院数量统计</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                            <div id="card2" style="height:100%; width: 100%" ></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">有效工单数/工单数</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                            <div id="card3" style="height:100%; width: 100%" ></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">工程师数量统计</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                            <div id="card4" style="height:100%; width: 100%" ></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script src="${static}/layui/app.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script src="${static}/layui/layui.js?t=1"></script>
<script>
    layui.config({
        base: '${static}/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'console']);
</script>
<script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.js"></script>
<script type="text/javascript">
    /*// 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],*/
                // 基于准备好的dom，初始化echarts图表
                var myChart = echarts.init(document.getElementById('card1'));
                var myChart2 = echarts.init(document.getElementById('card2'));
                var myChart3 = echarts.init(document.getElementById('card3'));
                var myChart4 = echarts.init(document.getElementById('card4'));

                var input = {};
                input.topicType = 0;//设备统计
                medatc('topicCount/countData', input, function (result) {
                    option = getOption('设备数', result.names, result.values);
                    myChart.setOption(option);

                });
                input.topicType = 3;//医院数量
                medatc('topicCount/countData', input, function (result) {
                    myChart2.setOption(getOption('医院数量', result.names, result.values));

                });

                var specialCountTypeInput = {};
                specialCountTypeInput.specialCountType = 1;
                medatc('topicCount/specialCountData', specialCountTypeInput, function (result) {
                    myChart3.setOption(getOption2('有效工单数', '工单数', result.names, result.v1, result.v2));
                });

                input.topicType = 1;//工程师数量
                medatc('topicCount/countData', input, function (result) {
                    myChart4.setOption(getOption('工程师数量', result.names, result.values));

                });

                function getOption(yTitle, names, values) {
                    var option = {
                        grid: {
                            x: '40px',
                            y: '50px',
                            width: '95%'
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:[yTitle],
                            show: false
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : names
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name: yTitle,
                                type: 'bar',
                                data: values,
                                barWidth : 24,
                                label:{
                                    show: true,
                                    position: 'top'
                                },
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            var colorList = [
                                                'rgba(32,160,255,0.85)', 'rgba(247,186,42,0.85)', 'rgba(19,206,102,0.85)', 'rgba(255,73,73,0.85)',
                                                'rgba(19,194,194,0.85)', 'rgba(150,86,238,0.85)', 'rgba(250,136,32,0.85)', 'rgba(246,83,161,0.85)', 'rgba(93,213,0,0.85)'
                                            ];
                                            return colorList[params.dataIndex]
                                        }
                                    }
                                }
                            }
                        ]
                    };
                    return option;
                }

    function getOption2(yTitle1, yTitle2, names, values1, values2) {
        var option = {
            grid: {
                x: '40px',
                y: '50px',
                width: '95%'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:[yTitle1,yTitle2],
                show: false
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : names
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name: yTitle1,
                    type: 'bar',
                    data: values1,
                    barWidth : 24,
                    label:{
                        show: true,
                        position: 'top'
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = [
                                    'rgba(32,160,255,0.85)', 'rgba(247,186,42,0.85)', 'rgba(19,206,102,0.85)', 'rgba(255,73,73,0.85)',
                                    'rgba(19,194,194,0.85)', 'rgba(150,86,238,0.85)', 'rgba(250,136,32,0.85)', 'rgba(246,83,161,0.85)', 'rgba(93,213,0,0.85)'
                                ];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                },
                {
                    name: yTitle2,
                    type: 'bar',
                    data: values2,
                    barWidth : 24,
                    label:{
                        show: true,
                        position: 'top'
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = [
                                    'rgba(19,194,194,0.85)', 'rgba(150,86,238,0.85)', 'rgba(250,136,32,0.85)', 'rgba(246,83,161,0.85)', 'rgba(93,213,0,0.85)',
                                    'rgba(32,160,255,0.85)', 'rgba(247,186,42,0.85)', 'rgba(19,206,102,0.85)', 'rgba(255,73,73,0.85)'
                                ];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }

            ]
        };
        return option;
    }

</script>
</body>
</html>

